<template>
	<div class="box" style="background: #fff;padding: 10px;">
		<div class="boxList" v-if="active == 0">
			<div 
				class="cla" 
				v-for="(item,index) in types" 
				:key="index"
				@click="goAnswer(item.name)"
			>
				{{item.name}}
			</div>
			
			<!-- <div class="cla" @click="goAnswer('')">综合练习</div> -->
		</div>
		
		<!-- 答题卡历史 -->
		<ul class="historyList" v-if="active == 1">
			<li v-for="item,index in historyList" @click="goDetail(item)">
				<p>答题时间: {{item.createTime}}</p>
				<p>答题人: {{item.userName || '---'}}</p>
				<p>答题分数: {{item.grade}}/{{item.testPaperList.length}}</p>
				<p>答题类型: {{item.topicClass || '---'}}</p>
			</li>
			
			<van-empty description="暂无数据" v-if="historyList.length == 0" />
		</ul>
		
		<van-tabbar :active="active" @change="onChange">
		  <van-tabbar-item icon="home-o">选择模式</van-tabbar-item>
		  <van-tabbar-item icon="setting-o">答题历史</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				types:[],
				active:0,
				historyList:[]
			}
		},
		
		mounted() {
			this.getTypes()
			this.getHistoryList()
		},
		
		methods:{
			
			// 前往答题卡页面
			goAnswer(name){
				this.$router(`/subPackages2/pages/examination/answerSheet?topicClass=${name}`)
			},
			
			// 获取答题类型
			async getTypes(){
				let result = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: 'tmfl',
				}, true)
				
				this.types = result.data
			},
			
			// 获取历史答题记录
			async getHistoryList(){
				let result = await this.$axios('overallSituation', {
					databaseName: 'testPaperList',
					state: 'look',
				}, false)
				
				if(result.code == 200){
					this.historyList = result.data
				}
			},
			
			// tabBar发生变化
			onChange(e){
				console.log(e);
				this.active = e.detail
				if(this.active == 1){
					this.getHistoryList()
				}
			},
			
			// 点击查看答题卡详情
			goDetail(item){
				this.$router(`/subPackages2/pages/examination/answerSheet?_id=${item._id}`)
			}
		}
	}
</script>

<style scoped>
	.boxList {
		width: 100%;
		max-height: 88vh;
		display: flex;  
		
		flex-wrap: wrap;
		justify-content: center;
		overflow-y: scroll;
	}
	
	.cla {
		width: 97%;
		height: 10vh;
		display: flex;
		background: #7950f2;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: 700;
		border-radius: 10px;
		margin-top: 10px;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
	}
	
	.cla_noShow {
		width: 32%;
		height: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		border-radius: 10px;
		margin-top: 10px;
	}
	
	.historyList {
		width: 100%;
		max-height: 88vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		overflow-y: scroll;
	}
	
	.historyList li {
		padding: 10px;
		box-sizing: border-box;
		font-size: 12px;
		font-weight: 700;
		width: 97%;
		background: #7950f2;
		color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		line-height: 20px;
	}
</style>